<template>
     <el-button type="success" @click="add" plain color="#85BB47">新增</el-button>
  <el-table :data="tableData" style="width: 100%">
   
    <el-table-column type="index" label="编号" width="80" />
    <el-table-column prop="menuName" label="菜单名称" width="120" />
    <el-table-column prop="url" label="菜单Url" width="120" />
    <el-table-column prop="menuParentName" label="父级菜单名称" width="120" />
    <el-table-column prop="creator" label="创建人" width="120" />
    <el-table-column prop="creatorDate" label="创建日期" width="200" >
         <template #default="scope">
            {{ moment(scope.row.creatorDate).format('yyyy-MM-DD HH:mm:ss') }}
        </template>
    </el-table-column>
    <el-table-column prop="updator" label="修改人" width="120" />

     <el-table-column prop="updatorDate" label="修改日期" width="200" >
        <template #default="scope" >
             <span v-if="!scope.row.updatorDate || scope.row.updatorDate === ''"> </span>
           <span v-else> {{ moment(scope.row.updatorDate).format('yyyy-MM-DD HH:mm:ss') }}</span>
        </template>
     </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="sco">
        <el-button  type="primary" plain @click="update(sco.row)">
          修改
        </el-button>
        <el-button  type="danger" plain  @click="del(sco.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

 <el-dialog v-model="dialogFormVisible" title="新增菜单" width="500">
<el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
   <el-form-item label="父级菜单：" prop="region">
      <el-select v-model="ruleForm.pid" placeholder="请选择父级菜单">
         <el-option  label="顶级菜单" :value="0" />
        <el-option v-for="item in xiala" :label="item.menuName" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单名称：" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>
    <el-form-item label="跳转的url地址：" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
 </el-dialog>


 <el-dialog v-model="dialogFormVisibleedit" title="修改菜单" width="500">
<el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
   <el-form-item label="父级菜单：" prop="region">
      <el-select v-model="ruleForm.pid" placeholder="请选择父级菜单">
         <el-option  label="顶级菜单" :value="0" />
        <el-option v-for="item in xiala" :label="item.menuName" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单名称：" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>
    <el-form-item label="跳转的url地址：" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="submitForms(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
 </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios'
import {ref,reactive,onMounted,computed} from 'vue'
import moment from 'moment'
import {useCounterStore} from '@/stores/counter'
const pinia=useCounterStore();
import Read from  '@/http/Readhttp'
import Write from '@/http/Writehttp'
//显示菜单
const tableData =ref([])
onMounted(()=>{
    getmenu();
    getxiala();
})
const getmenu=()=>{
    Read.get("/api/Menus/GetMenuParment").then(res=>{
         
        tableData.value = res.data.datas;
        
       
    })
}
//下拉框
const xiala=ref([{
    id:'',
    menuName:''
}])
const getxiala=()=>{
  
    Read.get("/api/Menus/GetMenuParment").then(res=>{
         
        xiala.value = res.data.datas;
        getmenu();
       
    })
}
//新增
const dialogFormVisible = ref(false)
const add=()=>{
  
    dialogFormVisible.value=true;
    getmenu();
}
import { ElMessage, type FormInstance, type FormRules,ElMessageBox } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id:'',
"menuName": "",
  "url": "",
  "pid":'',
  "orderby": "",
  "creator": pinia.account.UserName,
  updator:pinia.account.UserName
})

const rules = reactive<FormRules>({
  menuName: [
    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
  ],
   url: [
    { required: true, message: '菜单Url不能为空', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        Write.post("/api/Menus/AddMenu",ruleForm).then(res=>{
            if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            dialogFormVisible.value=false;
            getmenu();
            getxiala();
            ruleForm.pid='';
            ruleForm.menuName='';
            ruleForm.url='';
        }
        else{
            ElMessage.error(res.data.msg);
        }
        })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//修改
const dialogFormVisibleedit = ref(false)
const submitForms = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        Write.put("/api/Menus/UpdateMenu",ruleForm).then(res=>{
            if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            dialogFormVisibleedit.value=false;
            getmenu();
            getxiala();
            ruleForm.pid='';
            ruleForm.menuName='';
            ruleForm.url='';
        }
        else{
            ElMessage.error(res.data.msg);
        }
        })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const update=(row:any)=>{
    dialogFormVisibleedit.value=true;
    ruleForm.id=row.id
    ruleForm.menuName=row.menuName;
  
    ruleForm.pid=row.pid;
    
    ruleForm.url=row.url;
}
//删除
const del=(id:any)=>{
   ElMessageBox.confirm(
    '确认要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     Write.put("/api/Menus/DelMenu",{id:id}).then(res=>{
         if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            getmenu();
            getxiala();
        }
        else{
            ElMessageBox.confirm(
    '是否删除全部?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     Write.put("/api/Menus/DelMenu",{id:id}).then(res=>{
         if(res.data.code==202)
        {
            ElMessage.success(res.data.msg);
            getmenu();
             getxiala();
        }
        else{
            ElMessage.warning(res.data.msg);
            getmenu();
             getxiala();
        }
    })
})
        }
    })
})
}
  

</script>
